<template>
  <div class="CustomeInfoTwo">
    <!--顶部固定区域-->
    <div
      class="weui-cells TotalCustome"
      style="margin-top:0rem;position: fixed;z-index: 1000;width: 100%;"
    >
      <div class="tab_scroll">
        <tab active-color="#1e96eb" :prevent-default="false">
          <tab-item selected @on-item-click="handler">全部</tab-item>
          <tab-item @on-item-click="handler">员工</tab-item>
          <tab-item @on-item-click="handler">访客</tab-item>
        </tab>
      </div>

      <div class="weui-cell" style="padding: 0px 10px">
        <div class="weui-cell__hd">
          <img
            src="../../static/img/main.png"
            alt
            style="width:45px;height45px;margin-right:5px;background-size: cover;object-fit: cover;display:block"
          />
        </div>
        <div class="weui-cell__bd color_666">
          <p>{{typeName}}</p>
        </div>
        <div class="weui-cell__ft" style="color: #1e96eb;">{{TotalCustome}}(人)</div>
      </div>

      <div class="my-search">
        <search
          @result-click="resultClick"
          @on-change="getResult"
          v-model="value"
          :auto-fixed="false"
          position="fixed"
          placeholder="请输入名称"
          auto-scroll-to-top
          top="55px"
          @on-focus="onFocus"
          @on-cancel="onCancel"
          @on-submit="onSubmit"
          ref="search"
        ></search>
      </div>
    </div>

    <!--mescroll滚动区域的基本结构-->
    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
      <!--内容...-->
      <ul id="dataList" class="data-list">
        <div class="weui-cells custome_weui-cells" style="margin-top:10.5rem; padding-top: 10.5rem;">
          <div class="weui-cell" v-for="(item, index) in dataList" :key="index">
            <div class="weui-cell__hd">
              <img
                :src="item.image"
                style="width:45px;height:45px;background-size: cover;object-fit: cover;margin-right:15px;display:block;border-radius:50%;"
              />
            </div>

            <div class="weui-cell__bd">
              <p>{{item.name}}</p>
            </div>
            <div class="weui-cell__ft"></div>
          </div>
        </div>
      </ul>
    </mescroll-vue>
  </div>
</template>
<script>
import { Tab, TabItem, Toast } from "vux";
import MescrollVue from "mescroll.js/mescroll.vue";
import VueLazyload from "vue-lazyload";
import { bridge } from "../../src/assets/common/js/dsbridge";
import { postWayStafflist, getWayStafflist } from "@/assets/request/api";
import { parse } from "path";

export default {
  name: "NewCustomeInfo",
  data() {
    return {
      value: "",
      show: false,
      type: 0, //0:全部 1：员工  2：访客
      typeName: "总人数",
      TotalCustome: "0",
      title: "人员信息",
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 8 //每页数据条数,默认10
        }
      }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 8 //每页数据条数,默认10
        },
        //支持自定义没有更多数据
        htmlNodata: '<p class="upwarp-nodata">亲,没有更多数据了~</p>',
        noMoreSize: 8, //如果列表已无数据,可设置列表总数大于8才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        toTop: {
          //回到顶部按钮
          src: "./static/img/mescroll-totop.png", //图片路径,默认null,支持网络图
          offset: 12 //列表滚动1000px才显示回到顶部按钮
        },
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          warpId: "dataList", //父布局的id (1.3.5版本支持传入dom元素)
          icon: "./static/img/mescroll-empty.png", //图标,默认null,支持网络图
          tip: "暂无相关数据~" //提示
        }
      },
      dataList: [], // 列表数据,
      tabindex: 0 //下标
    };
  },

  components: {
    Tab,
    TabItem,
    MescrollVue,
    VueLazyload,
    Toast
  },
  mounted() {
    $(".weui-cells").css("margin-top", "0px");
    $(".vux-tab-wrap").css("padding-top", "55px");
    $(".vux-tab-item").css({ "line-height": "55px", "font-size": "16px" });
    $(".mescroll-empty").css("padding-top", "130px");
    $(".vux-tab").css("height", "55px");
    $(".vux-tab-container").css("height", "55px");
  },

  methods: {
    setFocus() {
      this.$refs.search.setFocus();
    },
    resultClick(item) {
      console.log(item);
    },
    getResult(val) {
      console.log("on-change", val);
    },
    onSubmit() {
      this.$refs.search.setBlur();
      console.log("on onSubmit");
      let self = this;
      self.mescroll.triggerDownScroll();
    },
    onFocus() {
      console.log("on focus");
    },
    onCancel() {
      console.log("on cancel");
      this.value = "";
      this.mescroll.triggerDownScroll();
    },
    // mescroll组件初始化的回调,可获取到mescroll对象 (如果this.mescroll并没有使用到,可不用写mescrollInit)
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      let self = this;
      request(self, page, mescroll);
    },

    //点击事件
    handler(index) {
      console.log(index);
      switch (index) {
        case 0:
          this.type = 0;
          this.typeName = "总人数";
          break;

        case 1:
          this.type = 1;
          this.typeName = "员工总数";
          break;

        case 2:
          this.type = 2;
          this.typeName = "访客总数";
          break;
      }
      //先置空
      this.dataList = [];
      this.mescroll.triggerDownScroll();
    }
  },

  created() {},

  activated() {}
};

//请求数据
let request = (self, page, mescroll) => {
  bridge.call("getH5Parame", self.type, async function(v) {
    console.log(11111111);
    console.log(v);
    let pam = JSON.parse(v);
    console.log(pam);
    console.log(pam.comId);
    console.log(pam.code);
    console.log(self.type);
    console.log(2222222);
    if (self.type == 2) {
      var data = {
        value: {
          comId: -1, //公司id
          code: "111", //设备code
          name: "", //模糊搜索员工姓名
          pageNum: page.num, //页数
          pageSize: page.size //每页大小
        }
      };
    } else {
      var data = {
        value: {
          comId: pam.comId, //公司id
          code: pam.code, //设备code
          name: self.value, //模糊搜索员工姓名
          pageNum: page.num, //页数
          pageSize: page.size //每页大小
        }
      };
    }
    console.log(33333333);
    console.log(data);
    console.log(44444444444);
    self.$vux.loading.show({
      text: "Loading",
      position: "center"
    });

    const postWayStaffMsg = await postWayStafflist(data);

    console.log(postWayStaffMsg, "postWayStaffMsg");
    setTimeout(() => {
      if (postWayStaffMsg != null) {
        // 请求的列表数据
        let arr = postWayStaffMsg;
        console.log(5555555);
        console.log(arr.value.data);
        console.log(666666666);

        if (arr.value.code == 1) {
          console.log(7777777777);
          self.TotalCustome = arr.value.data.count;
          // 如果是第一页需手动制空列表
          if (page.num === 1) self.dataList = [];
          // 把请求到的数据添加到列表
          self.dataList = self.dataList.concat(arr.value.data.reslutList);
          console.log(7777788888);
          // 数据渲染成功后,隐藏下拉刷新的状态
          self.$nextTick(() => {
            console.log(777778888);
            self.show = false;
            self.$vux.loading.hide();
            mescroll.endSuccess(arr.value.data.reslutList.length);
          });
          console.log(777770000);
        } else {
          console.log(88888888);
          self.$nextTick(() => {
            self.show = false;
            self.$vux.loading.hide();
            mescroll.endSuccess(self.dataList.length);
          });
        }
      } else {
        console.log(999999999);
        self.show = false;
        self.$vux.loading.hide();
        self.$nextTick(() => {
          mescroll.endSuccess(0);
        });
      }
    }, 500);
  });
};
</script>


<style scope lang="less">
.NewCustomeInfo {
  height: 100%;
  display: flex;
}

.NewCustomeInfo .TotalCustome {
  top: 0;
  margin-top: 0rem;
  position: fixed;
  width: 100%;
  height: auto;
  z-index: 1000;
}

/*以fixed的方式固定mescroll的高度*/
.NewCustomeInfo .mescroll {
  z-index: 180;
  position: fixed;
  top: 10.5rem;
  bottom: 0;
  height: auto;
}

.NewCustomeInfo .custome_weui-cells {
  position: fixed;
  top: 10.5rem;
  margin-top: 10.5rem;
}

.mescroll-empty {
  width: 100%;
  padding-top: 150px;
  text-align: center;
}

.NewCustomeInfo .tab_scroll {
  overflow: scroll;
}

.NewCustomeInfo .box::-webkit-scrollbar {
  display: none;
}

.my-search {
  background: #fff;
  width: 100%;
  height: auto;

  .weui-search-bar__box .weui-icon-search,
  .weui-search-bar__box .weui-icon-clear {
    top: 15px;
    position: fixed;
  }
  .weui-icon-search {
    display: none;
  }
}
</style>
